<template>
  <div>
    <!-- 农作物情况 -->
    <div class="nzwqk-class">
      <div class="nzwqk-class-title">
        总种植面积
        <img src="@/assets/government/digitalFarmland/arrow-bottom.png" />
      </div>

      <div id="nzwqk" style="width: 550px;height: 300px;margin-top: 0px;"></div>
    </div>
    <!-- 农业产业指标 -->
    <div class="nycyzb-class mt16">
      <div class="nycyzb-class-content">
        <div>龙头企业</div>
        <div>+2.5%</div>
        <div>200个</div>
      </div>
      <!--  -->
      <div
        class="nycyzb-class-ltqy"
        v-for="item in zbList"
        :key="item"
        :style="{
          left: item.left,
          width: item.width,
          top: item.top,
          padding: item.padding,
          backgroundImage: `url('${item.img}')`,
        }"
      >
        <div
          class="nycyzb-class-ltqy-content"
          :style="{ width: item.textWidth }"
        >
          <div class="fs14">{{ item.name }}</div>
          <div class="fs16 fwb value-nzu">200</div>
        </div>
      </div>

      <img
        src="@/assets/government/digitalFarmland/3.png"
        style="position: absolute;top: 59px;left: 175px;"
      />
    </div>
    <!-- 灾害预警 -->
    <div class="zhyj-class mt16">
      <div class="zhyj-class-item df aic mb10" v-for="item in 5" :key="item">
        <div
          class="df aic jcc mr10"
          style="width: 38px;height: 38px;background-color: #1890FF;"
        >
          <img
            src="@/assets/government/digitalFarmland/yj.png"
            style="top: 59px;left: 175px;"
          />
        </div>
        <div class="fwb fs16 zhyj-class-item-title">寒潮蓝色预警</div>
        <div class="fwb fs16 zhyj-class-item-date">2024-12-12</div>
        <div class="fwb fs16 zhyj-class-item-type">[蓝色]</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zbList: [
        {
          name: "龙头企业",
          value: 200,
          left: "43px",
          top: "76px",
          textWidth: "60px",
          width: "141px",
          img: require(".././../../../assets/government/digitalFarmland/_1.png"),
          padding: " 10px 0 0 63px",
        },
        {
          name: "专业大户",
          value: 200,
          left: "6px",
          top: "148px",
          textWidth: "60px",
          width: "141px",
          img: require(".././../../../assets/government/digitalFarmland/_2.png"),
          padding: " 10px 0 0 63px",
        },

        {
          name: "农民专业合作组织",
          value: 200,
          left: "43px",
          top: "221px",
          textWidth: "120px",
          width: "191px",
          img: require(".././../../../assets/government/digitalFarmland/_4.png"),
          padding: " 10px 0 0 63px",
        },
        {
          name: "农资经营店",
          value: 200,
          left: "367px",
          top: "76px",
          textWidth: "73px",
          width: "141px",
          img: require(".././../../../assets/government/digitalFarmland/_3.png"),
          padding: " 10px 0 0 3px",
        },
        {
          name: "家庭农场",
          value: 200,
          left: "404px",
          top: "148px",
          textWidth: "73px",
          width: "141px",
          img: require(".././../../../assets/government/digitalFarmland/_5.png"),
          padding: " 10px 0 0 3px",
        },
        {
          name: "其他组织",
          value: 200,
          left: "367px",
          top: "221px",
          textWidth: "73px",
          width: "141px",
          img: require(".././../../../assets/government/digitalFarmland/_6.png"),
          padding: " 10px 0 0 3px",
        },
      ],
    };
  },
  mounted() {
    this.intinzwqk();
  },
  methods: {
    intinzwqk() {
      let myChart = this.$echarts.init(document.getElementById("nzwqk"));
      myChart.setOption({
        color: ["#1CC274", "#FE6A00", "#00F6FF", "#FFE400"],
        xAxis: {
          type: "category",
          data: ["2021", "2022", "2022", "2022", "2022", "2022", "2022"],
          axisLabel: {
            color: "white",
            fontSize: 16, // 设置字体大小为 14px，可以根据需要调整
            fontWeight: "bold",
          },
        },
        grid: {
          top: "30%",
          left: "2%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        legend: {
          top: "18%",
          textStyle: {
            color: "#fff",
            fontSize: "16",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "white",
            fontSize: 16, // 设置字体大小为 14px，可以根据需要调整
            fontWeight: "bold",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        series: [
          {
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
            },
            name: "蔬菜",
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
          {
            name: "苹果",
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
            },
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
          {
            name: "油料",
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
            },
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
          {
            name: "粮食作物",
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
            },
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.zhyj-class {
  width: 551px;
  height: 309px;
  background-image: url(".././../../../assets/government/digitalFarmland/4.png");
  padding: 60px 20px 0;
  position: relative;
  .zhyj-class-item {
    background-color: rgba(43, 95, 143, 0.5);
    height: 38px;
    .zhyj-class-item-type {
      margin-left: auto;
      margin-right: 30px;
      color: #00f6ff;
    }
    .zhyj-class-item-title {
      width: 200px;
    }
    .zhyj-class-item-date {
      width: 150px;
      text-align: center;
    }
  }
}
.nycyzb-class {
  width: 551px;
  height: 309px;
  background-image: url(".././../../../assets/government/digitalFarmland/1.png");
  position: relative;
  .nycyzb-class-ltqy-content {
    text-align: center;
  }
  .nycyzb-class-ltqy {
    height: 56px;
    position: absolute;
  }
}
.nzwqk-class {
  width: 551px;
  height: 309px;
  background-image: url(".././../../../assets/government/digitalFarmland/2.png");
  .nzwqk-class-title {
    width: 158px;
    height: 30px;
    background: linear-gradient(0deg, #0072ff 0%);
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    float: right;
    margin-right: 20px;
    margin-top: 4px;
  }
}
.nycyzb-class-content {
  position: absolute;
  top: 153px;
  width: 200px;
  left: 175px;
  z-index: 9;
  text-align: center;
  div:nth-child(1) {
    font-size: 14px;

    font-weight: bold;
    color: #ffffff;
    text-shadow: 0px 2px 2px #003f85;
    font-style: italic;
    background: linear-gradient(0deg, #7ae3ff 0%, #ffffff 63.525390625%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  div:nth-child(2) {
    color: #fe6a00;
    font-weight: bold;
  }
  div:nth-child(3) {
    font-weight: bold;
    font-size: 14px;
    font-style: italic;
    background: linear-gradient(
      180deg,
      #b0fffa 31.201171875%,
      #ffffff 75.3173828125%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.value-nzu {
  font-style: italic;
  background: linear-gradient(
    180deg,
    #b0fffa 31.201171875%,
    #ffffff 75.3173828125%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
